<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8" />

	<title>聊天室</title>
	<base href="${request.contextPath}/">
	<link href="static/bootstrap/css/bootstrap.css" rel="stylesheet">
	<link href="static/css/my-style.css" rel="stylesheet">

	<script src="static/js/socket.io/socket.io.js"></script>
	<script src="static/js/moment.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="static/js/newmsg.js"></script>

</head>

<body onload="">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<p class="lead text-center">用户列表聊天室：当前在线<span id="count">${count!}</span>人</p>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-2">
				<p class="lead">发言用户</p>
				<ol id="user">
				</ol>
			</div>
			<div class="col-sm-10">
				<div class="row">
					<div class="col-sm-12">
						<div class="row">
							<div class="col-sm-8">
								<form class="well form-inline" onsubmit="return false;">
									<input id="userName" class="input-xlarge" type="text" placeholder="你的名字" maxlength="5"/> <input id="message" class="input-xlarge"
									 type="text" placeholder="你想说的话" />
									<button type="button" onClick="sendMessage()" class="btn" id="send">发送</button>
									<button type="button" onClick="sendDisconnect()" class="btn">关闭连接</button>
									<button type="button" onClick="sendconnect()" class="btn">重连</button>
								</form>
							</div>
							<div class="col-sm-4">
								<form class="well form-inline" onsubmit="return false;">
									<input id="sessionId" class="input-xlarge" type="text" placeholder="用户id" />
									<button type="button" onClick="closeBySessionId()" class="btn" id="send">踢人</button>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<div id="console" class="well"></div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<script>

		var socket = io.connect('http://localhost:1025');

		socket.on('connect', function () {
			output('<span class="connect-msg">连接成功!</span>');
		});

		socket.on('chatevent', function (data) {
			console.log(data);
			$('#count').html(data.count);
			if(data.userName && data.sessionId && data.message){
				output('<span class="username-msg">' + data.userName + '(' + data.sessionId + '):</span> ' + data.message);
				message.notification(data.message);
			}
			userList(data.userList,data.sessionId);
		});

		socket.on('disconnect', function (data) {
			output('<span class="disconnect-msg">关闭连接!</span>');
		});

		function sendDisconnect() {
			socket.disconnect();
		}

		function sendconnect() {
			socket.connect();
		}

		function sendMessage() {
			var message = $('#message').val();
			$('#message').val('');

			var jsonObject = {
				userName: $('#userName').val(),
				message: message
			};
			socket.emit('chatevent', jsonObject);
		}

		function output(message) {
			var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";
			var element = $("<div>" + currentTime + " " + message + "</div>");
			$('#console').append(element);
			$('#console').scrollTop($('#console')[0].scrollHeight + 10);
		}

		function closeBySessionId(sessiontid) {
			sessiontid=$('#sessionId').val()===''?sessiontid:$('#sessionId').val();
			$.post('/closeBySessionId?sessionId=' + sessiontid);
		}
		
		function userList(userList,curSessionId){
			$('#user').html('');
			$.each( userList, function(i, n){
				var user=userList[i];
				for(var v in user){
					if(user[v]){
						$('#user').append('<li>'+user[v]+'<img src="static/img/tr.png" id='+v+'></li>');
						$('img').bind('click',function(){
							closeBySessionId($(this).attr('id'));
						})
					}
				}
					
			});
		}

		
		$(document).keydown(function (e) {
			if (e.keyCode == 13) {
				$('#send').click();
			}
		});
	</script>
</body>

</html>